<template>
  <div>
    <!-- 头部区域 -->
    <el-card class="top-card">
      <i class="el-icon-s-order"></i>
      <span>{{ isUpdate ? '编辑商品分类' : '添加商品分类'}}</span>
      <el-button class="btn-add" size="mini" @click="$router.back()">返回</el-button>
    </el-card>

    <!-- 内容区域 -->
    <el-card class="form-card">
      <el-form :model="productCate" :rules="rules" ref="productCateForm" label-width="150px">
        <!-- 分类名称 -->
        <el-form-item label="分类名称:" prop="name">
          <el-input v-model="productCate.name"></el-input>
        </el-form-item>
        <!-- 上级分类 -->
        <el-form-item label="上级分类:">
          <el-select v-model="productCate.parent_id" placeholder="请选择上级分类">
            <el-option v-for="item in selectProductCateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 数量单位 -->
        <el-form-item label="数量单位:">
          <el-input v-model="productCate.product_unit"></el-input>
        </el-form-item>
        <!-- 排序 -->
        <el-form-item label="排序:">
          <el-input v-model="productCate.sort"></el-input>
        </el-form-item>
        <!-- 分类是否启用 -->
        <el-form-item label="分类是否启用:">
          <el-radio-group v-model="productCate.nav_status">
            <!-- 最终是把label的值提交到服务器 -->
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 移动端是否显示 -->
        <el-form-item label="移动端是否显示:">
          <el-radio-group v-model="productCate.show_status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 分类图标 -->
        <el-form-item label="分类图标:">
          <single-upload :success-call-back="getCategoryIcon" upload-action="/api/api/auth/category/upload_category" :icon="productCate.icon" />
        </el-form-item>
        <!-- 关键字 -->
        <el-form-item label="关键字:">
          <el-input v-model="productCate.keywords"></el-input>
        </el-form-item>
        <!-- 分类描述 -->
        <el-form-item label="分类描述:">
          <el-input v-model="productCate.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()" size="small">{{ isUpdate ? '立即修改' : '立即添加'}}</el-button>
          <el-button @click="resetForm()" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from 'vue'
import singleUpload from '../../../../components/uploads/singleUpload.vue'
import { addCategory, getCategory, getCategoryId, editCategory } from '../../../../api/categoryApi'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
// 原始数据模型
const defaultProductCateForm = {
  name: '', // 分类名称
  nav_status: 1, // 分类是否启用 1 启用 0 不启用
  parent_id: 0, // 上级分类的id
  product_unit: '', // 该分类下商品的数量单位
  show_status: 1, // 移动端是否展示 1 展示 0 不展示
  sort: 1, // 排序
  keywords: '', // 关键字
  icon: '', // 分类图片
  description: '' // 分类描述
}
export default {
  name: 'CategoryAddOrEdit',
  components: {
    singleUpload
  },
  props: {
    // 确定是编辑还是添加
    isUpdate: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    // 关联表单
    const productCateForm = ref(null)
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      productCate: Object.assign({}, defaultProductCateForm), // 深拷贝
      rules: {
        name: [
          { required: true, message: '请输入商品分类的名称', trigger: 'blur' },
          { min: 3, max: 120, message: '长度在 3 到 120 个字符', trigger: 'blur', },
        ],
      },
      // 上级分类的数组
      selectProductCateList: []
    })

    // 获取商品分类图标
    const getCategoryIcon = (data) => {
      // console.log(data)
      if (data === null) {
        state.productCate.icon = ''
        return
      }
      state.productCate.icon = data.name
    }

    onMounted(async () => {
      // 1. 如果是编辑，则需要获取数据
      if (props.isUpdate) { // 编辑
        // 根据分类的id获取当前的分类
        getCategoryId(route.query.id).then(res => {
          if (res.status === 1) {
            state.productCate = res.data[0] // 赋值
          }
        }).catch(err => {
          console.log(err)
        })
      }

      // 2. 获取商品分类的数据
      getCategory(0, 1, 100).then(res => {
        // console.log(res)
        if (res.status === 1) {
          state.selectProductCateList = res.data.category_list
          state.selectProductCateList.unshift({ id: 0, name: '无上级分类' })
        } else {
          ElMessage.error('获取商品分类数据失败!')
        }
      }).catch((err) => {
        console.log(err)
      })
    })

    // 重置
    const resetForm = () => {
      productCateForm.value.resetFields()
      state.productCate = Object.assign({}, defaultProductCateForm) // 还原对象
    }

    // 添加或修改
    const submitForm = () => {
      productCateForm.value.validate((valid) => {
        if (valid) {
          if (props.isUpdate) {
            editCategory(state.productCate).then(res => {
              // console.log(res)
              if (res.status === 1) {
                // 还原表单
                resetForm()
                // 提示用户
                ElMessage.success('修改成功!')
                // 返回列表页
                router.back()
              }
            }).catch((err) => {
              console.log(err)
            })
          } else {
            addCategory(state.productCate).then(res => {
              // console.log(res)
              if (res.status === 1) {
                // 还原表单
                resetForm()
                // 提示用户
                ElMessage.success('添加成功!')
                // 返回列表页
                router.back()
              }
            }).catch((err) => {
              console.log(err)
            })
          }
        } else {
          ElMessage.error('分类的名称不能为空!')
        }
      })
    }

    return {
      ...toRefs(state),
      productCateForm,
      getCategoryIcon,
      resetForm,
      submitForm
    }
  }
}
</script>

<style scoped>
.form-card {
  margin-top: 20px;
}
</style>